<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">


    <el-table :data="tableData" border style="width: 100%" @row-click="handleRowClick">
      <el-table-column label="选择" align="center"  width="70px" >
        <template #default="scope">
          <el-checkbox v-model="scope.row.selected" :value="scope.row.id" label="" size="large" />
        </template>
      </el-table-column>
      <el-table-column label="产品图片" align="center"  width="150px" >
        <template #default="scope">
          <img :src="scope.row.productImg" style="width: 60px;height: 60px;border-radius: 4px;">
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="产品名称" width="150px"/>
      <el-table-column prop="procedures" label="申请流程" width="100px"/>
      <el-table-column prop="modeOfRepayment" label="还款方式" width="100px" />
      <el-table-column prop="timeRate" label="年化利率" width="100px" />
      <el-table-column prop="deadline" label="期限" width="100px"/>
      <el-table-column prop="quotaFormula" label="额度" width="100px">
        <template #default="scope">
          <el-statistic title="" :value="scope.row.quotaFormula" value-style="font-size:14px" />
        </template>
      </el-table-column>
      <el-table-column prop="monthlyInfo" label="月供" width="100px">
        <template #default="scope">
          <el-statistic title="" :value="scope.row.monthlyInfo" value-style="font-size:14px" />
        </template>
      </el-table-column>
      <el-table-column prop="deduct" label="业务员提成" width="100px">
        <template #default="scope">
          {{scope.row.deduct}} {{scope.row.units}}
        </template>
      </el-table-column>
      <el-table-column prop="directProfit" label="收费标准" width="100px">
        <template #default="scope">
          {{scope.row.directProfit}} {{scope.row.units}}
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<!--      <el-button @click="testForm" type="primary" >测试分配</el-button>-->
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">

import * as UsersApi from "@/api/hutai/salesman";
import { ElMessage, ElMessageBox } from "element-plus";

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const tableData = ref([])
const formRef = ref() // 表单 Ref
let orderId = 0;
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t(type)
  formType.value = type

  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      const data = await UsersApi.getCheckProductAccess(id)
      //console.log(data)
      tableData.value = data
      orderId = id;
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗


const formData = ref({
  orderId: null,
  userId: null,
  voList: []
})


/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {

  // 提交请求
  formLoading.value = true
  try {
    const selectedRows = tableData.value.filter(row => row.selected);
    formData.value.orderId = orderId
    const list = [];
    for (var i =0;i<selectedRows.length;i++){
      const formData = {
        orderNo: orderId,
        id: selectedRows[i].id,
        procedures: selectedRows[i].procedures,
        productImg: selectedRows[i].productImg,
        productName: selectedRows[i].productName,
        modeOfRepayment: selectedRows[i].modeOfRepayment,
        timeRate: selectedRows[i].timeRate,
        deadline: selectedRows[i].deadline,
        quotaFormula: selectedRows[i].quotaFormula,
        monthlyInfo: selectedRows[i].monthlyInfo
      }
      list.push(formData);
    }
    formData.value.voList = list;
    // console.log(list)

    if (list.length>0){
      ElMessageBox.confirm('确认资料已经完善，并转权证?')
       .then(() => {
         subOk();
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消',
          })
        })
      dialogVisible.value = false
      // 发送操作成功的事件
      //emit('success')
    }else {
      ElMessage({
        message: '请选择产品数据！',
        type: 'warning',
      })
    }

  } finally {
    formLoading.value = false
  }
}

const handleRowClick = (row) => {
  row.selected = !row.selected;
};


const subOk = async () => {
  //console.log(formData.value)
  const data = await UsersApi.toWarrant(formData.value)

  ElMessage({
    type: 'success',
    message: data,
  })
}


</script>
